/* BAUZENTRUM RETZMANN - STABLE VERSION 3.0 */
import React, { useState, useEffect } from 'react';
import { 
  Phone, Mail, Clock, MapPin, Menu, X, ChevronDown, 
  Hammer, Home, Truck, Users, ArrowRight, CheckCircle2, 
  Star, Layers, Leaf, Maximize, Lightbulb, MessageSquare, 
  Palette, ChevronLeft, ChevronRight, User, Printer, Quote 
} from 'lucide-react';

const App = () => {
  // --- STATE ---
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [currentView, setCurrentView] = useState('home');
  const [scrolled, setScrolled] = useState(false);
  const [activeExhibitionTab, setActiveExhibitionTab] = useState('Garten');
  const [mobileSubmenu, setMobileSubmenu] = useState(null);
  const [currentHeroSlide, setCurrentHeroSlide] = useState(0);
  const [themeColor, setThemeColor] = useState('red');
  const [showThemePicker, setShowThemePicker] = useState(false);

  // --- THEME CONFIGURATION ---
  const theme = {
    red: {
      bg: 'bg-red-600',
      bgHover: 'hover:bg-red-700',
      text: 'text-red-600',
      textHover: 'hover:text-red-700',
      border: 'border-red-600',
      borderLight: 'border-red-100',
      bgLight: 'bg-red-50',
      shadow: 'shadow-red-600/20',
      from: 'from-red-500',
    },
    blue: {
      bg: 'bg-blue-600',
      bgHover: 'hover:bg-blue-700',
      text: 'text-blue-600',
      textHover: 'hover:text-blue-700',
      border: 'border-blue-600',
      borderLight: 'border-blue-100',
      bgLight: 'bg-blue-50',
      shadow: 'shadow-blue-600/20',
      from: 'from-blue-500',
    },
    green: {
      bg: 'bg-emerald-600',
      bgHover: 'hover:bg-emerald-700',
      text: 'text-emerald-600',
      textHover: 'hover:text-emerald-700',
      border: 'border-emerald-600',
      borderLight: 'border-emerald-100',
      bgLight: 'bg-emerald-50',
      shadow: 'shadow-emerald-600/20',
      from: 'from-emerald-500',
    }
  }[themeColor];

  // --- EFFECTS ---
  useEffect(() => {
    const handleScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // --- NAVIGATION ---
  const navigateTo = (viewId) => {
    setCurrentView(viewId);
    setIsMenuOpen(false);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const scrollToSection = (id) => {
    setIsMenuOpen(false);
    if (currentView !== 'home') {
      setCurrentView('home');
      setTimeout(() => {
        const el = document.getElementById(id);
        if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }, 100);
    } else {
      const el = document.getElementById(id);
      if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  };

  // --- CONTENT DATA ---
  const heroSlides = [
    {
      image: "https://www.retzmann-bauzentrum.de/fileadmin/user_upload/Retzmann/seiten/Home/Slider/ProfikundenWebbanner1920x600Kompetenz201907261148.png",
      title: "Unsere Leute. Deine Kompetenz.",
      subtitle: "Das ist Profi-Partnerschaft!"
    },
    {
      image: "https://www.retzmann-bauzentrum.de/fileadmin/user_upload/Retzmann/seiten/Home/Slider/_MG_7130_cropped.jpg",
      title: "Leistungsfähiger Fuhrpark",
      subtitle: "Pünktlich und zuverlässig auf Ihrer Baustelle."
    },
    {
      image: "https://www.retzmann-bauzentrum.de/fileadmin/user_upload/Retzmann/seiten/Home/Slider/_MG_7136_cropped.jpg",
      title: "Umfangreiches Warenlager",
      subtitle: "Alles sofort verfügbar für Ihr Projekt."
    },
    {
      image: "https://www.retzmann-bauzentrum.de/fileadmin/user_upload/Retzmann/seiten/Home/Slider/Schuettgutboxen_cropped.jpg",
      title: "Schüttgutlager Kleinmenge",
      subtitle: "Flexibel und passgenau für jeden Bedarf."
    }
  ];

  // Slider Auto-Play (8s)
  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentHeroSlide((prev) => (prev + 1) % heroSlides.length);
    }, 8000);
    return () => clearInterval(timer);
  }, []);

  const nextHeroSlide = () => setCurrentHeroSlide((prev) => (prev + 1) % heroSlides.length);
  const prevHeroSlide = () => setCurrentHeroSlide((prev) => (prev === 0 ? heroSlides.length - 1 : prev - 1));

  // --- RENDER HELPERS ---
  const handleImageError = (e) => {
    e.target.src = "https://images.unsplash.com/photo-1503387762-592deb58ef4e?q=80&w=2689&auto=format&fit=crop";
    e.target.alt = "Platzhalter Bild";
  };

  const departments = [
    { title: "Trockenbau", icon: Home, image: "https://images.unsplash.com/photo-1581094794329-cd136ce4dad5?q=80&w=2600&auto=format&fit=crop", action: () => navigateTo('trockenbau') },
    { title: "Bauelemente", icon: Star, image: "https://www.retzmann-bauzentrum.de/fileadmin/user_upload/Retzmann/seiten/Ausstellungen/Bauelemente_1.jpg", action: () => navigateTo('home') },
    { title: "Baufachmarkt", icon: Hammer, image: "https://images.unsplash.com/photo-1581092160562-40aa08e78837?q=80&w=2670&auto=format&fit=crop", action: () => navigateTo('home') },
    { title: "Fliesen & Sanitär", icon: CheckCircle2, image: "https://www.retzmann-bauzentrum.de/fileadmin/user_upload/Retzmann/seiten/Ausstellungen/Ausstellungen_neu/Fliesen_1.png", action: () => navigateTo('home') },
    { title: "Aussenanlage", icon: Leaf, image: "https://www.retzmann-bauzentrum.de/fileadmin/_processed_/3/9/csm_JASTO_4_85f559df99.jpg", action: () => navigateTo('home') },
    { title: "Putze & WDVS", icon: Layers, image: "https://images.unsplash.com/photo-1628744876497-eb30460be9f6?q=80&w=2670&auto=format&fit=crop", action: () => navigateTo('home') },
    { title: "Dach & Fassade", icon: Home, image: "https://images.unsplash.com/photo-1632759145351-1d592919f522?q=80&w=2670&auto=format&fit=crop", action: () => navigateTo('home') },
    { title: "Roh- & Hochbau", icon: Home, image: "https://images.unsplash.com/photo-1541888946425-d81bb19240f5?q=80&w=2670&auto=format&fit=crop", action: () => navigateTo('home') },
    { title: "Tiefbau", icon: Truck, image: "https://images.unsplash.com/photo-1590486803833-1c5dc8ce8420?q=80&w=2670&auto=format&fit=crop", action: () => navigateTo('home') }
  ];

  const contactsData = {
    "Zentrale": [{ name: "Sabine Christmann", phone: "(06747) 9343-22", email: "s.christmann@retzmann-bauzentrum.de" }],
    "Baufachmarkt": [{ name: "Theo Muders", phone: "(06747) 9343-26", email: "t.muders@retzmann-bauzentrum.de" }],
    "Trockenbau": [{ name: "Ralph Engel", phone: "(06747) 9343-15", email: "r.engel@retzmann-bauzentrum.de" }],
    "Buchhaltung": [{ name: "Jennifer Barthel", phone: "(06747) 9343-10", email: "j.barthel@retzmann-bauzentrum.de" }]
  };

  const historyData = [
    { year: '1971', text: 'Entstehung als Niederlassung Mat. Kröll GmbH & Co.' },
    { year: '1988', text: 'Eröffnung unseres Baufachmarktes in Boppard.' },
    { year: '2009', text: 'Umfirmierung zur Bauzentrum Retzmann GmbH.' },
    { year: 'Heute', text: '14 Mitarbeiter, eigener Fuhrpark mit Kranfahrzeugen.' }
  ];

  const exhibitions = {
    "Garten": ["https://www.retzmann-bauzentrum.de/fileadmin/_processed_/3/9/csm_JASTO_4_85f559df99.jpg", "https://www.retzmann-bauzentrum.de/fileadmin/_processed_/2/c/csm_JASTO_5_e180433b18.jpg"],
    "Fliesen": ["https://www.retzmann-bauzentrum.de/fileadmin/user_upload/Retzmann/seiten/Ausstellungen/Ausstellungen_neu/Fliesen_1.png", "https://www.retzmann-bauzentrum.de/fileadmin/user_upload/Retzmann/seiten/Ausstellungen/Ausstellungen_neu/Fliesen_2.png"]
  };

  const guidesData = [
    { title: "Gartenmöbel", desc: "Verwandeln Sie Ihren Garten in ein Wohnzimmer.", img: "https://api.eurobaustoff.de/cgi-bin/infomam_ws/services/rs2/cs/csimg?mid=20230321.8334b61c-4d33-4aa6-a914-764a70cdca3d&format=21%3A9&w=800" },
    { title: "Pools & Co.", desc: "Ein Pool ist wie ein Freibad zu Hause – nur besser.", img: "https://api.eurobaustoff.de/cgi-bin/infomam_ws/services/rs2/cs/csimg?mid=20230321.8334b61c-4d33-4aa6-a914-764af0003557&format=21%3A9&w=800" },
    { title: "Licht im Garten", desc: "Laue Sommerabende auf der Terrasse.", img: "https://api.eurobaustoff.de/cgi-bin/infomam_ws/services/rs2/cs/csimg?mid=20230321.db6e552f-06ae-91b6-a914-464ba09e942e&format=21%3A9&w=800" }
  ];

  const navStructure = [
    { title: "Start", action: () => navigateTo('home') },
    { title: "Aktuelles", items: ["Angebote", "Restposten", "Neuigkeiten"] },
    { title: "Fachabteilungen", items: departments.map(d => ({ name: d.title, action: d.action })) },
    { title: "Ausstellungen", action: () => navigateTo('ausstellungen') },
    { title: "Ratgeber", link: "#guides", action: () => scrollToSection('guides') },
    { title: "Service", items: ["Serviceleistungen", "Ansprechpartner", "Lieferservice"] },
    { title: "Über uns", items: ["Bauzentrum Retzmann", "Anfahrt", "Öffnungszeiten"] }
  ];

  return (
    <div className={`font-sans text-slate-800 antialiased bg-white selection:bg-slate-100 selection:${theme.text} min-h-screen flex flex-col`}>
      
      {/* TOP BAR */}
      <div className="bg-slate-900 text-slate-300 py-2 text-xs md:text-sm hidden md:block z-50">
        <div className="container mx-auto px-6 flex justify-between items-center">
           <div className="flex gap-6">
              <span className="flex items-center gap-2"><MapPin className={`w-4 h-4 ${theme.text}`} /> Halsenbach</span>
              <span className="flex items-center gap-2"><Clock className={`w-4 h-4 ${theme.text}`} /> Mo-Fr 7:00-18:00</span>
           </div>
           <div className="flex gap-6 items-center">
              <a href="tel:+49674793430" className="hover:text-white font-bold flex items-center gap-2"><Phone className="w-4 h-4" /> +49 6747 9343 - 0</a>
              <button onClick={() => navigateTo('ansprechpartner')} className={`hidden lg:flex items-center gap-2 ${theme.bg} text-white px-3 py-1 rounded-sm text-xs font-bold ${theme.bgHover} transition-colors ml-4`}>
                 <MessageSquare className="w-3 h-3" /> Angebot anfragen
              </button>
           </div>
        </div>
      </div>

      {/* HEADER */}
      <header className={`fixed w-full z-40 transition-all duration-300 ${scrolled ? 'top-0 bg-white shadow-md py-2' : 'md:top-9 top-0 bg-white/95 py-4'}`}>
        <div className="container mx-auto px-6 flex justify-between items-center relative">
          <div className="flex items-center cursor-pointer" onClick={() => navigateTo('home')}>
             <div className="bg-white px-4 py-2 rounded-full shadow-lg border border-slate-100">
                <img src="https://www.retzmann-bauzentrum.de/fileadmin/user_upload/Retzmann/images/logo_small.png" alt="Logo" className="h-8 object-contain" onError={handleImageError} />
             </div>
          </div>

          {/* Desktop Nav */}
          <nav className="hidden xl:flex items-center gap-6">
             <button onClick={() => navigateTo('home')} className={`text-sm font-bold hover:${theme.text} transition-colors`}>Start</button>
             
             <div className="relative group">
                <button className={`flex items-center gap-1 text-sm font-medium hover:${theme.text} py-4`}>
                   Fachabteilungen <ChevronDown className="w-3 h-3" />
                </button>
                <div className={`absolute top-full left-0 bg-white shadow-xl border-t-2 ${theme.border} py-2 w-56 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all`}>
                   {departments.map((dept, i) => (
                      <button key={i} onClick={dept.action} className={`block w-full text-left px-4 py-2 text-sm text-slate-600 hover:bg-slate-50 hover:${theme.text}`}>{dept.title}</button>
                   ))}
                </div>
             </div>

             <button onClick={() => navigateTo('ausstellungen')} className={`text-sm font-medium hover:${theme.text} transition-colors`}>Ausstellungen</button>
             <button onClick={() => scrollToSection('history')} className={`text-sm font-medium hover:${theme.text} transition-colors`}>Über uns</button>
             <button onClick={() => navigateTo('ansprechpartner')} className={`${theme.bg} ${theme.bgHover} text-white px-5 py-2 rounded-sm text-sm font-bold shadow-lg flex items-center gap-2`}>
                <Phone className="w-4 h-4" /> Kontakt
             </button>
          </nav>

          {/* Mobile Toggle & Theme */}
          <div className="flex items-center gap-4">
             <div className="relative hidden md:block">
                <button onClick={() => setShowThemePicker(!showThemePicker)} className="p-2 hover:bg-slate-100 rounded-full"><Palette className="w-5 h-5 text-slate-600" /></button>
                {showThemePicker && (
                   <div className="absolute top-full right-0 mt-2 bg-white shadow-xl border border-slate-100 p-3 flex gap-2 rounded-sm">
                      <button onClick={() => setThemeColor('red')} className="w-6 h-6 rounded-full bg-red-600"></button>
                      <button onClick={() => setThemeColor('blue')} className="w-6 h-6 rounded-full bg-blue-600"></button>
                      <button onClick={() => setThemeColor('green')} className="w-6 h-6 rounded-full bg-emerald-600"></button>
                   </div>
                )}
             </div>
             <button onClick={() => setIsMenuOpen(!isMenuOpen)} className="xl:hidden p-2"><Menu className="w-8 h-8 text-slate-800" /></button>
          </div>
        </div>

        {/* Mobile Menu Drawer */}
        <div className={`absolute top-full left-0 w-full bg-white shadow-xl transition-all duration-300 overflow-hidden ${isMenuOpen ? 'max-h-screen opacity-100' : 'max-h-0 opacity-0'}`}>
           <div className="container px-6 py-6 flex flex-col gap-4">
              {navStructure.map((item, i) => (
                 <div key={i} className="border-b border-slate-100 pb-2">
                    <div className="font-bold text-lg mb-2" onClick={() => { if(item.action) item.action(); setMobileSubmenu(mobileSubmenu === i ? null : i); }}>{item.title}</div>
                    {item.items && mobileSubmenu === i && (
                       <div className="pl-4 flex flex-col gap-2">
                          {item.items.map((sub, j) => (
                             <button key={j} className="text-left text-slate-600 py-1" onClick={() => { 
                                if(typeof sub === 'object') sub.action(); 
                                else if(sub === "Trockenbau") navigateTo('trockenbau');
                                else navigateTo('home');
                             }}>{typeof sub === 'string' ? sub : sub.name}</button>
                          ))}
                       </div>
                    )}
                 </div>
              ))}
           </div>
        </div>
      </header>

      {/* === CONTENT VIEWS === */}
      <main className="flex-grow pt-24">
        
        {/* VIEW: HOME */}
        {currentView === 'home' && (
          <div className="animate-in fade-in duration-500">
             {/* HERO */}
             <section className="relative h-[600px] flex items-center justify-center bg-slate-900 overflow-hidden group">
                <div className="absolute inset-0">
                   <img src={heroSlides[currentHeroSlide].image} className="w-full h-full object-cover opacity-60 transition-opacity duration-1000" onError={handleImageError} />
                   <div className="absolute inset-0 bg-gradient-to-t from-slate-900 via-transparent to-transparent"></div>
                </div>
                
                <button onClick={prevHeroSlide} className="absolute left-4 z-10 p-2 bg-white/10 hover:bg-white/20 text-white rounded-full hidden md:block"><ChevronLeft className="w-8 h-8" /></button>
                <button onClick={nextHeroSlide} className="absolute right-4 z-10 p-2 bg-white/10 hover:bg-white/20 text-white rounded-full hidden md:block"><ChevronRight className="w-8 h-8" /></button>

                <div className="relative z-10 text-center px-6 max-w-4xl">
                   <div className={`inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 border border-white/20 text-white text-xs font-bold mb-6 backdrop-blur-sm`}>
                      <Star className={`w-3 h-3 ${theme.text} fill-current`} /> i&M Bauzentrum Partner
                   </div>
                   <h1 className="text-4xl md:text-6xl font-bold text-white mb-6 drop-shadow-xl">{heroSlides[currentHeroSlide].title}</h1>
                   <p className="text-xl text-white/90 mb-10 max-w-2xl mx-auto">{heroSlides[currentHeroSlide].subtitle}</p>
                   <div className="flex flex-col sm:flex-row gap-4 justify-center">
                      <button onClick={() => navigateTo('ansprechpartner')} className={`${theme.bg} ${theme.bgHover} text-white px-8 py-3 rounded-sm font-bold shadow-lg flex items-center justify-center gap-2`}>Jetzt Kontakt aufnehmen <ArrowRight className="w-5 h-5"/></button>
                      <button onClick={() => scrollToSection('history')} className="bg-white/10 border border-white/30 hover:bg-white/20 text-white px-8 py-3 rounded-sm font-bold backdrop-blur-sm">Unsere Geschichte</button>
                   </div>
                </div>
             </section>

             {/* DEPARTMENTS TEASER */}
             <section className="py-24 bg-white">
                <div className="container mx-auto px-6">
                   <div className="text-center mb-16">
                      <h2 className={`${theme.text} font-bold tracking-wider uppercase text-sm mb-2`}>Alles für Ihr Projekt</h2>
                      <h3 className="text-4xl font-bold text-slate-900">Unsere Fachabteilungen</h3>
                   </div>
                   <div className="grid md:grid-cols-3 gap-8">
                      {departments.slice(0,6).map((dept, i) => (
                         <div key={i} onClick={dept.action} className="group relative h-64 rounded-sm overflow-hidden cursor-pointer shadow-md hover:shadow-xl transition-all">
                            <img src={dept.image} className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" onError={handleImageError} />
                            <div className="absolute inset-0 bg-slate-900/40 group-hover:bg-slate-900/20 transition-colors"></div>
                            <div className="absolute bottom-0 left-0 w-full p-6">
                               <div className="flex items-center gap-3">
                                  <div className={`p-2 ${theme.bg} rounded-sm text-white`}><dept.icon className="w-5 h-5" /></div>
                                  <h4 className="text-xl font-bold text-white">{dept.title}</h4>
                               </div>
                            </div>
                         </div>
                      ))}
                   </div>
                </div>
             </section>

             {/* GOOGLE REVIEWS */}
             <section className="py-24 bg-slate-50 border-t border-slate-200">
                <div className="container mx-auto px-6 text-center">
                   <h2 className={`${theme.text} font-bold tracking-wider uppercase text-sm mb-4`}>Kundenstimmen</h2>
                   <h3 className="text-4xl font-bold text-slate-900 mb-8">Was unsere Kunden sagen</h3>
                   <div className="flex justify-center gap-1 text-yellow-500 mb-2">
                      {[1,2,3,4,5].map(i => <Star key={i} className="w-6 h-6 fill-current" />)}
                   </div>
                   <p className="text-slate-600 font-bold mb-12">4,4 von 5 Sternen auf Google (138 Rezensionen)</p>
                   
                   <div className="grid md:grid-cols-3 gap-8 mb-12 text-left">
                      <div className="bg-white p-8 rounded-sm shadow-sm relative">
                         <Quote className="absolute top-4 left-4 w-8 h-8 text-slate-100" />
                         <p className="text-slate-600 italic mb-4 relative z-10">"Sehr zuvorkommend, freundlich, große Auswahl und gute Preise."</p>
                         <p className="font-bold text-slate-900">- Google Nutzer</p>
                      </div>
                      <div className="bg-white p-8 rounded-sm shadow-sm relative">
                         <Quote className="absolute top-4 left-4 w-8 h-8 text-slate-100" />
                         <p className="text-slate-600 italic mb-4 relative z-10">"Kompetente Beratung und schnelle Lieferung. Genau der richtige Partner."</p>
                         <p className="font-bold text-slate-900">- Stammkunde</p>
                      </div>
                      <div className="bg-white p-8 rounded-sm shadow-sm relative">
                         <Quote className="absolute top-4 left-4 w-8 h-8 text-slate-100" />
                         <p className="text-slate-600 italic mb-4 relative z-10">"Top Service im Lager. Hilfsbereit beim Beladen."</p>
                         <p className="font-bold text-slate-900">- Handwerksbetrieb Müller</p>
                      </div>
                   </div>
                   <a href="https://www.google.com/search?q=Bauzentrum+Retzmann+GmbH+Rezensionen" target="_blank" rel="noopener noreferrer" className={`inline-flex items-center gap-2 ${theme.bg} text-white px-8 py-3 rounded-sm font-bold shadow-lg ${theme.bgHover}`}>
                      <Star className="w-5 h-5" /> Bewertung schreiben
                   </a>
                </div>
             </section>

             {/* HISTORY */}
             <section id="history" className="py-24 bg-white scroll-mt-24">
                <div className="container mx-auto px-6">
                   <div className="flex flex-col lg:flex-row gap-16">
                      <div className="lg:w-1/3">
                         <h2 className={`${theme.text} font-bold uppercase text-sm mb-4`}>Über uns</h2>
                         <h3 className="text-4xl font-bold text-slate-900 mb-6">Wachstum durch <span className={theme.text}>Beständigkeit.</span></h3>
                         <p className="text-slate-600 mb-8 text-lg">Was 1971 als Niederlassung begann, ist heute ein fester Bestandteil der regionalen Bauwirtschaft.</p>
                         <button onClick={() => navigateTo('ansprechpartner')} className={`w-full ${theme.bg} text-white py-3 rounded-sm font-bold shadow-md ${theme.bgHover}`}>Zum Team</button>
                      </div>
                      <div className="lg:w-2/3 border-l-2 border-slate-100 pl-8 space-y-12">
                         {historyData.map((item, i) => (
                            <div key={i} className="relative">
                               <div className={`absolute -left-[41px] top-1 w-5 h-5 rounded-full border-4 border-white bg-slate-300`}></div>
                               <span className={`text-2xl font-bold ${theme.text} block mb-2`}>{item.year}</span>
                               <p className="text-slate-600">{item.text}</p>
                            </div>
                         ))}
                      </div>
                   </div>
                </div>
             </section>
          </div>
        )}

        {/* VIEW: TROCKENBAU */}
        {currentView === 'trockenbau' && (
           <div className="animate-in slide-in-from-bottom-4 duration-500">
              <div className="bg-slate-900 py-24 text-center">
                 <h1 className="text-5xl font-bold text-white mb-4">Trockenbau</h1>
                 <p className="text-slate-300 text-xl">Lösungen für Wand, Decke & Boden.</p>
              </div>
              <div className="container mx-auto px-6 py-16 flex flex-col lg:flex-row gap-12">
                 <div className="lg:w-1/2">
                    <img src="https://images.unsplash.com/photo-1581094794329-cd136ce4dad5?q=80&w=2600" className="w-full rounded-sm shadow-xl" onError={handleImageError} />
                 </div>
                 <div className="lg:w-1/2">
                    <h2 className={`text-3xl font-bold text-slate-900 mb-6 border-l-4 ${theme.border} pl-4`}>Unser Sortiment</h2>
                    <ul className="space-y-4 mb-8">
                       {["Brandschutz", "Schallschutz", "Akustikdecken", "Technische Elemente"].map((item, i) => (
                          <li key={i} className="flex items-center gap-3 font-medium text-slate-700"><CheckCircle2 className={`w-5 h-5 ${theme.text}`} /> {item}</li>
                       ))}
                    </ul>
                    <button onClick={() => navigateTo('ansprechpartner')} className={`${theme.bg} text-white px-8 py-3 rounded-sm font-bold shadow-lg ${theme.bgHover}`}>Experten kontaktieren</button>
                 </div>
              </div>
           </div>
        )}

        {/* VIEW: ANSPRECHPARTNER */}
        {currentView === 'ansprechpartner' && (
           <div className="animate-in slide-in-from-bottom-4 duration-500">
              <div className="bg-slate-900 py-24 text-center">
                 <h1 className="text-5xl font-bold text-white mb-4">Ihre Ansprechpartner</h1>
                 <p className="text-slate-300 text-xl">Finden Sie den richtigen Experten.</p>
              </div>
              <div className="container mx-auto px-6 py-16 grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                 {Object.entries(contactsData).map(([dept, people]) => (
                    <div key={dept} className="bg-white p-8 rounded-sm shadow-lg border border-slate-100">
                       <h4 className="font-bold text-2xl text-slate-800 mb-6 pb-4 border-b border-slate-100">{dept}</h4>
                       <div className="space-y-6">
                          {people.map((p, i) => (
                             <div key={i}>
                                <p className="font-bold text-slate-900 text-lg">{p.name}</p>
                                <a href={`tel:${p.phone}`} className="flex items-center gap-2 text-slate-600 hover:text-slate-900 mt-1"><Phone className="w-4 h-4"/> {p.phone}</a>
                                <a href={`mailto:${p.email}`} className={`flex items-center gap-2 ${theme.text} mt-1 break-all`}><Mail className="w-4 h-4"/> E-Mail</a>
                             </div>
                          ))}
                       </div>
                    </div>
                 ))}
              </div>
           </div>
        )}

        {/* VIEW: AUSSTELLUNGEN */}
        {currentView === 'ausstellungen' && (
           <div className="animate-in slide-in-from-bottom-4 duration-500">
              <div className="bg-slate-900 py-24 text-center">
                 <h1 className="text-5xl font-bold text-white mb-4">Unsere Ausstellungen</h1>
                 <p className="text-slate-300 text-xl">Lassen Sie sich inspirieren.</p>
              </div>
              <div className="container mx-auto px-6 py-16">
                 <div className="flex justify-center gap-4 mb-12 flex-wrap">
                    {Object.keys(exhibitions).map(tab => (
                       <button key={tab} onClick={() => setActiveExhibitionTab(tab)} className={`px-6 py-2 rounded-full font-bold ${activeExhibitionTab === tab ? `${theme.bg} text-white` : 'bg-slate-100 text-slate-600'}`}>{tab}</button>
                    ))}
                 </div>
                 <div className="grid md:grid-cols-3 gap-6">
                    {exhibitions[activeExhibitionTab].map((src, i) => (
                       <img key={i} src={src} className="w-full aspect-[4/3] object-cover rounded-sm shadow-md" onError={handleImageError} />
                    ))}
                 </div>
              </div>
           </div>
        )}

        {/* VIEW: RATGEBER */}
        {currentView === 'home' && (
            <section id="guides" className="py-24 bg-slate-50 border-t border-slate-200">
                <div className="container mx-auto px-6">
                    <div className="text-center mb-12">
                        <h2 className={`${theme.text} font-bold uppercase text-sm`}>Tipps & Tricks</h2>
                        <h3 className="text-4xl font-bold text-slate-900">Ratgeber</h3>
                    </div>
                    <div className="grid md:grid-cols-3 gap-8">
                        {guidesData.map((guide, i) => (
                            <div key={i} className="bg-white rounded-sm overflow-hidden shadow-md group hover:-translate-y-1 transition-transform">
                                <div className="h-48 overflow-hidden">
                                    <img src={guide.img} className="w-full h-full object-cover transition-transform group-hover:scale-110" onError={handleImageError} />
                                </div>
                                <div className="p-6">
                                    <h4 className="font-bold text-xl mb-2">{guide.title}</h4>
                                    <p className="text-slate-600 text-sm mb-4">{guide.desc}</p>
                                    <span className={`${theme.text} font-bold text-sm uppercase flex items-center gap-2`}>Lesen <ChevronRight className="w-4 h-4"/></span>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </section>
        )}

      </main>

      {/* FOOTER */}
      <footer className="bg-slate-50 text-slate-600 py-16 border-t border-slate-200 mt-auto">
        <div className="container mx-auto px-6 grid md:grid-cols-3 gap-12 text-sm">
           <div>
              <img src="https://www.retzmann-bauzentrum.de/fileadmin/user_upload/Retzmann/images/logo_small.png" className="h-8 mb-4 opacity-80" onError={handleImageError} />
              <p className="font-bold">Bauzentrum Retzmann GmbH</p>
              <p>Am Eichelgärtchen 2 b, 56283 Halsenbach</p>
           </div>
           <div>
              <h4 className="font-bold text-slate-900 mb-4 uppercase">Rechtliches</h4>
              <ul className="space-y-2">
                 <li><a href="#" className="hover:text-slate-900">Impressum</a></li>
                 <li><a href="#" className="hover:text-slate-900">Datenschutz</a></li>
                 <li><a href="#" className="hover:text-slate-900">AGB</a></li>
              </ul>
           </div>
           <div>
              <h4 className="font-bold text-slate-900 mb-4 uppercase">Kontakt</h4>
              <button onClick={() => navigateTo('ansprechpartner')} className={`font-bold ${theme.text}`}>Ansprechpartner finden</button>
           </div>
        </div>
        <div className="text-center text-xs text-slate-400 mt-12">&copy; 2026 Bauzentrum Retzmann GmbH</div>
      </footer>

    </div>
  );
};

export default App;